<template lang="pug">
transition(name="slide-fade")
    div(:class="`batman-active-panel ${iClass}`", 
        ref="active_panel", 
        v-if="visible",
        :data-state-id="state_id"
        :style="`;overflow-y:${scrollY};`", 
        data-focus="false")
        slot
</template>

<script>
if (!NodeList.prototype.forEach)
  NodeList.prototype.forEach = Array.prototype.forEach;

/**
 * 活动的面板，适用于放置发布表单等。
 */

import util from "./util";
import History from "html5-history-api";
console.log(History); // 必须调用

const FOCUSED_ZINDEX = 2;
const PRE_FOCUSED_ZINDEX = 1;

export default {
  name: "batman-active-panel",
  mixins: [util],
  data() {
    return {
      /**浏览器state_id */
      state_id: null,
      /** 前一个组件 */
      prev_active_panel: null,

      historyBacked: false
    };
  },
  props: {
    /**
     * 控制遮罩层的可见状态
     */
    visible: { type: Boolean, default: false },
    /**
     * 自定义样式类
     */
    iClass: { type: String, default: "" },
    /**
     * 是否可纵向滚动
     */
    "scroll-y": { type: String, default: "hidden" },
    /**
     * 浏览器后退事件方法，如果方法返回的是false则不关闭弹层，且不后退
     */
    "history-back": { type: Function }
  },
  watch: {
    visible(val) {
      this.visible_change();
    }
  },
  methods: {
    visible_change() {
      const visible = this.visible;
      if (visible) {
        window.avtivePanels = window.avtivePanels || [];
        window.avtivePanels.push(this.state_id);
        History.pushState({ id: this.state_id }, null, location.href);
        window.addEventListener(
          "popstate",
          this.onHistoryBack.bind(this),
          true
        );
      } else {
        if (!this.historyBacked) History.back(); // 等于true表示是来自后退事件 而不是直接设置visile等于true
        window.removeEventListener(
          "popstate",
          this.onHistoryBack.bind(this),
          true
        );
        if (window.avtivePanels) window.avtivePanels.pop();
        // -
      }
    },
    onHistoryBack() {
      const avtivePanels = window.avtivePanels || [];
      if (avtivePanels[avtivePanels.length - 1] != this.state_id) return;

      this.historyBacked = true; // 表示来自浏览器回退事件
      this.$emit("update:visible", false);
      return;

      if (!this.historyBack || this.historyBack() !== false) {
        // 默认关闭弹窗，且浏览器后退
        this.historyBacked = true; // 表示来自浏览器回退事件
        this.$emit("update:visible", false);
        return;
      }

      // 重新处理
      history.go(1);
      return;
    },
    unload() {
      alert(1);
      // 刷新和退出时
      this.historyBacked = true; // 表示来自浏览器回退事件
      this.$emit("update:visible", false);
    }
  },
  created() {
    this.state_id = this.new_id();
  },
  mounted() {
    this.$nextTick(() => {
      const body = document.querySelector("body");
      if (body.append) {
        body.append(this.$el);
      } else {
        body.appendChild(this.$el);
      }
    });
  },
  destroyed() {
    if (this.$el.parentNode) this.$el.parentNode.removeChild(this.$el);
  }
};
</script>

<style lang="less" scoped>
/* 可以设置不同的进入和离开动画 */
/* 设置持续时间和动画函数 */
.slide-fade-enter-active {
  transition: all 0.3s ease;
}
.slide-fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  transform: translateX(10px);
  opacity: 0;
}

.batman-active-panel {
  width: 100%;
  max-width: 100vw;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: hidden;

  position: fixed;
  top: 0;
  left: 0;

  // z-index: 1;

  background-color: white;
}
</style>
